<template>
  <view class="demo-page">
    <CustomNavBar title="弹窗组件演示" />

    <view class="demo-content">
      <view class="demo-section">
        <text class="section-title">弹窗组件演示</text>

        <view class="button-group">
          <button class="demo-btn" @click="showBasicPopup">基础弹窗</button>
          <button class="demo-btn" @click="showFullPopup">完整弹窗</button>
          <button class="demo-btn" @click="showCancelOnlyPopup">仅取消按钮</button>
          <button class="demo-btn" @click="showCustomPopup">自定义文字</button>
        </view>
      </view>
    </view>

    <!-- 公共弹窗组件 -->
    <PublicPopup
      :visible="popupVisible"
      :topTitle="popupConfig.topTitle"
      :title="popupConfig.title"
      :description="popupConfig.description"
      :confirmText="popupConfig.confirmText"
      :cancelText="popupConfig.cancelText"
      :showCancel="popupConfig.showCancel"
      :showConfirm="popupConfig.showConfirm"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
  </view>
</template>

<script>
import CustomNavBar from '@/components/CustomNavBar.vue';
import PublicPopup from '@/components/PublicPop-up.vue';

export default {
  components: {
    CustomNavBar,
    PublicPopup
  },
  data() {
    return {
      popupVisible: false,
      popupConfig: {
        topTitle: '',
        title: '',
        description: '',
        confirmText: '确认',
        cancelText: '取消',
        showCancel: true,
        showConfirm: false
      }
    };
  },
  methods: {
    // 显示基础弹窗
    showBasicPopup() {
      this.popupConfig = {
        topTitle: '',
        title: '基础弹窗',
        description: '这是一个基础的弹窗示例',
        confirmText: '确认',
        cancelText: '取消',
        showCancel: true,
        showConfirm: true
      };
      this.popupVisible = true;
    },

    // 显示完整弹窗
    showFullPopup() {
      this.popupConfig = {
        topTitle: '提示信息',
        title: '提交成功',
        description: '有欠费，待补缴反反复复,请及时补缴,谢谢配合',
        confirmText: '去补缴',
        cancelText: '取消',
        showCancel: true,
        showConfirm: true
      };
      this.popupVisible = true;
    },

    // 显示仅确认按钮弹窗
    showCancelOnlyPopup() {
      this.popupConfig = {
        topTitle: '提示信息',
        title: '提交成功',
        description: '我们将尽快与你取得联系，请耐心等待',
        confirmText: '',
        cancelText: '知道了',
        showCancel: true,
        showConfirm: false
      };
      this.popupVisible = true;
    },

    // 显示自定义文字弹窗
    showCustomPopup() {
      this.popupConfig = {
        topTitle: '',
        title: '确认退出',
        description: '确认要退出登录吗',
        confirmText: '取消',
        cancelText: '确认',
        showCancel: true,
        showConfirm: true
      };
      this.popupVisible = true;
    },

    // 确认按钮回调
    handleConfirm() {
      console.log('用户点击了确认');
      uni.showToast({
        title: '确认操作',
        icon: 'success'
      });
      this.popupVisible = false;
    },

    // 取消按钮回调
    handleCancel() {
      console.log('用户点击了取消');
      uni.showToast({
        title: '取消操作',
        icon: 'none'
      });
      this.popupVisible = false;
    }
  }
};
</script>

<style scoped>
.demo-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.demo-content {
  padding: 40rpx;
}

.demo-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 32rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 32rpx;
  display: block;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.demo-btn {
  height: 88rpx;
  background-color: #00D4AA;
  color: #ffffff;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}

.demo-btn:active {
  background-color: #00B899;
}
</style>
